<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>系统管理员维护</title>
    <#include "../../commonFile/quote.ftl"/>
    <style>
        body{
            height:95%;
        }
    </style>
    <script>
        $(function(){
             $("#table").bootstrapTable({
                 url:'/systemManagerInfo/selectManagerInfo',  //获取表格数据
                 contentType:'application/x-www-form-urlencoded; charset=UTF-8',//使用post传参，去掉后无法成功
                 method: "post",
                 toolbar:"#toolbar",
                 cache: false,            //禁用ajax缓存
                 striped: true,           //表格显示条纹
                 pagination: true,        //在底部显示分页组件
                 pageList: [10, 20],       //设置页面可以显示的数据条数
                 pageSize: 10,             // 页面数据条数
                 pageNumber: 1,            // 首页页码
                 sidePagination: 'server', // 设置为服务器端分页
                 showColumns:true,        //是否显示内容列下拉框
                 showToggle:true,         //切换详细视图和列表视图
                 queryParamsType: '',
                 queryParams:function (params){   //请求服务器数据时，添加额外参数
                     return {
                         pageSize:params.pageSize, // 每页要显示的数据条数
                         pageNum:params.pageNumber,    // 页码
                         account:$("#account").val()
                     }
                 },
                 idField:'id',             //指定主键列
                 columns:[{
                        checkbox: true,   //显示一个勾选框
                        align: 'center'   //居中显示
                    },{
                     field:'type',  //返回json中的name
                     title:'性质',   //表格表头显示文字
                     align:'center',   //左右居中
                     valign: 'middle', // 上下居中
                     formatter: function (value, row, index) {
                         if(value == 1){
                             return "一般管理员";
                         }else if(value == 0){
                             return "超级管理员";
                         }
                     }
                    },
                     {
                        field:'account',
                        title:'用户名',
                        align:'center',
                        valign: 'middle'
                    },{
                         field:'created',
                         title:'创建时间',
                         align:'center',
                         valign: 'middle',
                         formatter: function (value, row, index) {
                             return new Date(value).toLocaleString();
                         }
                    },{
                         field:'updated',
                         title:'更新时间',
                         align:'center',
                         valign: 'middle',
                         formatter: function (value, row, index) {
                             return new Date(value).toLocaleString();
                         }
                    },{
                        field:'phone',
                        title:'手机号',
                        align:'center',
                        valign: 'middle'
                    },{
                        field:'email',
                        title:'邮箱',
                        align:'center',
                        valign: 'middle'
                    },{
                         field:'id',
                         title:'操作',
                         width:80,
                         align:'center',
                         valign: 'middle',
                         formatter:function(value, row, index){
                             var id = value;
                             var account = row.account;
                             var phone = row.phone;
                             var email = row.email;
                             var type = row.type;
                             var result = "";
                             result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"editBaseInfo('" + id + "','"+account+"','"+phone+"','"+email+"')\" title='编辑'><span class='glyphicon glyphicon-pencil'></span></a>";
                             if(type == 1){
                                 result += "<a href='javascript:;' class='btn btn-xs red' onclick=\"deleteById('" + id + "')\" title='删除'><span class='glyphicon glyphicon-remove'></span></a>";
                             }
                             return result;
                         }
                     }
                ]
             });
        });
        //表格查询
        function search(){
            $("#table").bootstrapTable("refresh");
        }
        //单条删除
        function deleteById(id){
            $.ajax({
                type:'post',
                url:'/systemManagerInfo/deleteByid',
                data:{id:id},
                success:function(result){
                    if(result.success==true){
                        alert(result.message);
                        $("#table").bootstrapTable("refresh");
                    }else{
                        alert(result.message);
                    }
                },
                error:function(){
                    alert("Ajax失败！");
                }
            });
        }
        //修改
        function editBaseInfo(id,account,phone,email){
            //清空验证信息
            $('form[id=myForm] label.error').remove();
            //清空表单
            $(':input','#myForm')
                    .not(':button, :submit, :reset')
                    .val('')
                    .removeAttr('checked')
                    .removeAttr('selected');
            $('#myModal').modal('show');
            $("#id").val(id);
            $("#formaccount").val(account);
            $("#phone").val(phone);
            $("#email").val(email);
        }
        //保存修改
        function saveEdit(id){
            if($('#myForm').valid()){
                var obj = {
                    id:$("#id").val(),
                    account:$("#formaccount").val(),
                    phone:$("#phone").val(),
                    email:$("#email").val()
                }
                $.ajax({
                        type:'post',
                        url:'/systemManagerInfo/update',
                        data:JSON.stringify(obj),
                        contentType:'application/json',
                        success:function(result){
                            if(result.success){
                                $("#table").bootstrapTable("refresh");
                                $('#myModal').modal('hide');
                                alert(result.message);
                            }
                        },error:function(){

                        }
                    });
            }
        }
        //新增
        function add(){
            $('form[id=myFormAdd] label.error').remove();
            //清空表单
            $(':input','#myFormAdd')
                    .not(':button, :submit, :reset')
                    .val('')
                    .removeAttr('checked')
                    .removeAttr('selected');
            $('#myModalAdd').modal('show');
        }
        //保存新增
        function saveAdd(){
            if($('#myFormAdd').valid()){
                var obj = {
                    account:$("#accountAdd").val(),
                    pwd:$("#passwordAdd").val(),
                    phone:$("#phoneAdd").val(),
                    email:$("#emailAdd").val()
                };
                $.ajax({
                    type:'post',
                    url:'/login/registerSubmit',
                    data:JSON.stringify(obj),
                    contentType : 'application/json',
                    success:function(result){
                        if(result.success==true){
                            $("#table").bootstrapTable("refresh");
                            $('#myModalAdd').modal('hide');
                            alert(result.message);
                        }else{
                            alert(result.message);
                        }
                    },
                    error:function(){
                        alert("Ajax失败！");
                    }
                });
            }
        }
    </script>
</head>
<body class="container-fluid">
    <div id="toolbar">
        <#--<button type="button" class="btn btn-warning btn-sm">修改</button>-->
        <#--<button type="button" class="btn btn-danger btn-sm">删除</button>-->
        <form id="form" class="form-inline" style="display: inline-block;">
            <div class="form-group">
                <input type="text" class="form-control input-sm" id="account" name="account" placeholder="用户名">
            </div>
            <button type="button" class="btn btn-default btn-sm" onclick="search()">查询</button>
        </form>
        <button type="button" class="btn btn-default btn-sm" onclick="add()">新增</button>
    </div>
    <table id="table"></table>
    <#--修改模态框-->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title">修改基本信息</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-xs-8 col-xs-offset-2">
                            <form id="myForm"  class="form-horizontal">
                                <input type="text" style="display: none;" id="id" name="id">
                                <div class="form-group">
                                    <label for="account">用户名</label>
                                    <input type="text" class="form-control required username" id="formaccount" name="account" placeholder="请输入新用户名">
                                </div>
                                <div class="form-group">
                                    <label for="phone">手机号</label>
                                    <input type="text" class="form-control required cellphone" id="phone" name="phone" placeholder="请输入新用户名">
                                </div>
                                <div class="form-group">
                                    <label for="email">邮箱</label>
                                    <input type="text" class="form-control required email" id="email" name="email" placeholder="请输入新邮箱">
                                </div>
                            </form>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="saveEdit()">保存</button>
                </div>
            </div>
        </div>
    </div>
    <#--新增模态框-->
    <div class="modal fade" id="myModalAdd" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title">新增一般管理员</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-xs-8 col-xs-offset-2">
                            <form id="myFormAdd"  class="form-horizontal">
                                <div class="form-group">
                                    <label for="account">用户名</label>
                                    <input type="text" class="form-control required username" id="accountAdd" name="accountAdd" placeholder="请输入用户名">
                                </div>
                                <div class="form-group">
                                    <label for="account">密码</label>
                                    <input type="password" class="form-control required password" id="passwordAdd" name="passwordAdd" placeholder="请输入密码">
                                </div>
                                <div class="form-group">
                                    <label for="phone">手机号</label>
                                    <input type="text" class="form-control required cellphone" id="phoneAdd" name="phoneAdd" placeholder="请输入手机号">
                                </div>
                                <div class="form-group">
                                    <label for="email">邮箱</label>
                                    <input type="text" class="form-control required email" id="emailAdd" name="emailAdd" placeholder="请输入邮箱">
                                </div>
                            </form>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="saveAdd()">保存</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>